<template>
  <div>
    <el-dialog
      :title="title"
      :visible="dialogVisible"
      :show-close="false"
      width="1000px"
    >
      <manage-info :row="row" />
      <div>
        <el-row type="flex" justify="space-between" style="margin-top: 25px">
          <el-col class="depature-title">发车状况</el-col>
        </el-row>
        <el-form
          ref="depatureManageDialog"
          :model="row"
          label-width="100px"
        >
          <el-row style="margin-top: 15px">
            <el-col :span="9">
              <el-form-item label="当前里程:" prop="mileage">
                <el-input
                  v-model="row.mileage"
                  size="medium"
                  placeholder="请输入当前里程"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="车况图片:" prop="img1">
                <upload-car-state
                  :folder="statefolder"
                  :row="row"
                  :img="row.img1"
                  @upload-success="handleUploadState"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车况图片:" prop="img2">
                <upload-car-state
                  :folder="statefolder"
                  :row="row"
                  :img="row.img2"
                  @upload-success="handleUploadstatus"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车况图片:" prop="img3">
                <upload-car-state
                  :folder="statefolder"
                  :row="row"
                  :img="row.img3"
                  @upload-success="handleUploadCondition"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="备注信息:" prop="des1">
                <el-input
                  v-model="row.des1"
                  size="medium"
                  placeholder="请输入备注"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="备注信息:" prop="des2">
                <el-input
                  v-model="row.des2"
                  size="medium"
                  placeholder="请输入备注"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="备注信息:" prop="des3">
                <el-input
                  v-model="row.des3"
                  size="medium"
                  placeholder="请输入备注"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定 发 车</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ManageInfo from '@/components/ManageInfo'
import UploadCarState from '@/components/UploadCarState'
export default {
  name: 'DepatureManageDialog',
  components: {
    ManageInfo,
    UploadCarState
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    row: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      title: '',
      statefolder: 'carState'
    }
  },
  methods: {
    handleCancel() {
      this.$emit('cancel-dialog')
      this.$refs.depatureManageDialog.resetFields()
    },
    handleConfirm() {
      this.$refs.depatureManageDialog.validate((valid) => {
        if (valid) {
          this.$emit('confirm-dialog', {
            id: this.row.id,
            mileage: this.row.mileage,
            img1: this.row.img1,
            img2: this.row.img2,
            img3: this.row.img3,
            des1: this.row.des1,
            des2: this.row.des2,
            des3: this.row.des3
          })
        } else {
          return false
        }
      })
    },
    handleUploadState(url) {
      this.row.img1 = url
    },
    handleUploadstatus(url) {
      this.row.img2 = url
    },
    handleUploadCondition(url) {
      this.row.img3 = url
    }
  }
}
</script>

<style scoped>
  .depature-title {
    border-bottom: 1px solid #ddd;
    height: 30px;
    font-size: 16px;
    font-weight: bold;
  }
</style>
